<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
        <el-pagination
            :background="background"    
            :layout="layout"
            :page-size.sync="pageSize"
            :total="total"
            :current-page.sync="currentPage"
            :page-sizes="pageSizes"
            v-bind="$attrs"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
  </div>
</template>



<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
    data(){
        return{

        }
    },
    props:{
        // 是否需要背景色
        background:{
            type:Boolean,
            default: true
        },
        // 总数
        total:{
          required: true,
          type: Number
        },
        // layout
        layout: {
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        },
        // 每页显示条目个数
        limit:{
            type: Number,
            default: 20
        },
        // 当前页
        page:{
            type:Number,
            default:1
        },
        pageSizes:{
            type: Array,
            default() {
                return [10, 20, 30, 50]
            }
        },
        hidden: {
            type: Boolean,
            default: false
        }
    },
    computed:{
        pageSize:{
            get(){
                return this.limit
            },
            set(val){
                this.$emit('update:limit',val)
            }
        },
        currentPage:{
            get(){
                return this.page
            },
            set(val){
                this.$emit("update:page",val);
            }
        }
    },
    methods:{
        handleSizeChange(val){
            this.$emit('pagination',{page:this.currentPage,limit:val});
            if(this.autoScroll){
                scrollTo(0,80);
            }
        },
        handleCurrentChange(val){
            this.$emit('pagination',{page:val,limit:this.pageSize});
             if(this.autoScroll){
                scrollTo(0,80);
            }
        }
    }
}
</script>







<style lang="scss" scoped>
    .pagination-container {
        // background: #fff;
        padding: 32px 16px;
    }
    .pagination-container.hidden {
        display: none;
    }
</style>
